<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Foundation</title>
    <link rel="stylesheet" href="css/foundation.css">
</head>

<body>
  <!-- <div class="row">
    <div class="small-4 columns">
      <img class="thumbnail" id="foo" data-toggler="hvkvvf-toggler" data-animate="hinge-in-from-top spin-out" src="http://foundation.zurb.com/sites/docs/assets/img/thumbnail/01.jpg" alt="Photo of Uranus." aria-expanded="true" style="display: block;">
    </div>
    <div class="small-4 columns">
      <img class="thumbnail" id="bar" data-toggler="mhirp7-toggler" data-animate="hinge-in-from-top spin-out" src="http://foundation.zurb.com/sites/docs/assets/img/thumbnail/02.jpg" alt="Photo of Uranus." aria-expanded="true" style="display: block;">
    </div>
    <div class="small-4 columns">
      <img class="thumbnail" id="baz" data-toggler="0baort-toggler" data-animate="hinge-in-from-top spin-out" src="http://foundation.zurb.com/sites/docs/assets/img/thumbnail/03.jpg" alt="Photo of Uranus." aria-expanded="true" style="display: block;">
    </div>
  </div> -->
  <button  class="button" data-toggle="foo bar baz">Toggle things</button>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script type="text/javascript">
        // var elem = new Foundation.DropdownMenu($("#test"));
        // $('#test').foundation('toggle',$('#test menu'));
        // var elem = new Foundation.Switch($("#test"));
        // $('#test').foundation('toggleMenu');
        // var elem = new Foundation.Tooltip($("#test"));
        // var elem = new Foundation.Orbit($("#test"));
        // var elem = new Foundation.Toggler($("#foo"));
        // var elem = new Foundation.Toggler($("#bar"));
        // var elem = new Foundation.Toggler($("#baz"));
    </script>
</body>

</html>
